<template>
  <div>
    <div class="block">
    <span class="demonstration">房源类型：</span>
    <el-cascader :options="styleOption" v-model="selectedOptions2" @change="handleChange" filterable changeOnSelect></el-cascader>
    <el-button type="primary" @click="getDataToMap">显示</el-button>
    </div>
    <baidu-map class="bm-view"
               ak="FFgmKwOFTdnxfsq7Ykz02eUFvmeqC92F"
               :center="center"
               :zoom="zoom"
               :scroll-wheel-zoom="true"
               @ready="handler">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="#d454be" size="BMAP_POINT_SIZE_BIGGER" @mouseover="infoWindowOpen" @mouseout="infoWindowClose"></bm-point-collection>
      <bm-info-window :position="infoPoint" title="房源价格信息" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
        <p v-text="infoWindow.contents"></p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
  import {BaiduMap, BmScale, BmNavigation, BmPointCollection, BmInfoWindow} from 'vue-baidu-map'
  import {getPriceToMap} from '../apis/api'
  import {locationDatas} from '../apis/cities'
  import {styleOptions1} from '../apis/houseStyleOptions'
  export default {
    components: {
      BaiduMap,
      BmScale,
      BmNavigation,
      BmPointCollection,
      BmInfoWindow
    },
    data () {
      return {
        center: {lng: 0, lat: 0},
        zoom: 3,
        points: [],
        infoWindow: {
          show: false,
          contents: ''
        },
        infoPoint: {},
        datas: {},
        localpositon: {},
        styleOption: styleOptions1,
        selectedOptions2: []
      }
    },
    methods: {
      getDataToMap () {
        let s
        if (this.selectedOptions2.length !== 0) {
          s = JSON.stringify(this.selectedOptions2)
        } else {
          s = JSON.stringify(['chuzu'])
        }
        getPriceToMap(s).then(res => {
          this.datas = JSON.parse(res.data)
          let avgDatas = this.datas
          let pointsList = []
          for (let avglabel in avgDatas) {
            if (locationDatas[avglabel]) {
              pointsList.push({lng: locationDatas[avglabel][0], lat: locationDatas[avglabel][1]})
            }
          }
//          for (let l in pointsList) {
//            alert(pointsList[l].lng)
//          }
          this.points = pointsList
        }, res => {
          console.log(res)
        })
      },
      handler ({BMap, map}) {
        console.log(BMap, map)
        this.center.lng = 116.46
        this.center.lat = 39.92
        this.zoom = 7
        this.getDataToMap()
      },
      infoWindowOpen (e) {
        let adatas = this.datas
        this.infoPoint = e.point
        for (let adata in adatas) {
          if (locationDatas[adata][0] === this.infoPoint.lng) {
            if (this.selectedOptions2[0] === 'chuzu') {
              this.infoWindow.contents = adata + '出租房均价：' + adatas[adata] + ' 元/万元'
              this.infoWindow.show = true
            } else if (this.selectedOptions2[0] === 'ershoufang') {
              this.infoWindow.contents = adata + '二手房均价：' + adatas[adata] + ' 元/万元'
              this.infoWindow.show = true
            } else if (this.selectedOptions2[0] === 'shangpu') {
              this.infoWindow.contents = adata + '商业房均价：' + adatas[adata] + ' 元/万元'
              this.infoWindow.show = true
            } else {
              this.infoWindow.contents = adata + '出租房均价：' + adatas[adata] + ' 元/万元'
              this.infoWindow.show = true
            }
          }
        }
      },
      infoWindowClose (e) {
        this.infoWindow.show = false
        this.infoPoint = {}
      },
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

<style>
  .bm-view {
    width: 100%;
    height: 550px;
    max-height: 800px;
  }
  .block {
    margin-bottom: 15px;
  }
</style>
